<template>
  <div class="article">
    <!-- 内容 -->
    <div class="container">
      <!-- 左边 文章分类 -->
      <div class="left-category">
        <ArticleCategory :getCategoryId="getCategoryId" :close="handlerClose" />
      </div>
      <!-- 中间 文章 -->
      <div class="article-list">
        <ArticleList v-model:categoryId="categoryId" />
      </div>
      <!-- 右边 排行榜 -->
      <div class="right-rank">
        <ArticleRank />
      </div>
    </div>
    <!-- 登录遮罩层 -->
    <LoginDialog :close="handlerClose" v-if="isExist" />
  </div>
</template>

<script setup>
import ArticleCategory from "./Aside/ArticleCategory.vue";
import ArticleList from "./Content/ArticleList.vue";
import ArticleRank from "./Rank/ArticleRank.vue";
import { ref } from "vue";
import LoginDialog from "@/components/LoginDialog.vue";

// 登录遮罩层是否显示
const isExist = ref(false);

// 分类Id,传递给文章模块做数据查询
const categoryId = ref();

// 获取分类id 用户点击分类列表时触发
const getCategoryId = (id) => {
  categoryId.value = id;
};

// 处理遮罩层关闭
const handlerClose = (status) => {
  if (status) {
    isExist.value = true;
  } else {
    isExist.value = false;
  }
};
</script>

<style scoped lang="scss">
.article {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .container {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left-category {
      width: 15%;
      border-radius: 4px;
      position: sticky;
      top: 75px;
      height: fit-content;
      max-height: calc(100vh - 101px);
    }
    .article-list {
      width: 63%;
      border-radius: 4px;
      background-color: #f2f3f5;
    }
    .right-rank {
      width: 20%;
      height: fit-content;
      max-height: calc(100vh - 101px);
    }
  }
}
</style>